import React, { useState, useEffect } from 'react';
import { useNavigate, Outlet } from 'react-router-dom';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    DesktopOutlined,
    KeyOutlined,
    UserOutlined,
    LogoutOutlined,
} from '@ant-design/icons';
import { Layout, Menu, Dropdown, Button, Avatar, Image, Popconfirm } from 'antd';
import '../assets/styles/nav.css';
import { getMenuApi } from '../api/login';

export default function NavPage() {
    const navigate = useNavigate()
    const { Header, Sider, Content } = Layout;
    const [collapsed, setCollapsed] = useState(false);
    const [item, setItems] = useState([])
    let menu
    const userinfo = JSON.parse(localStorage.user)
    // console.log(userinfo.avatar);
    useEffect(() => {
        let it = []
        const username = JSON.parse(localStorage.user).username
        getMenuApi(username).then(res => {
            menu = res.rows.children
            // console.log('menu', menu);
            it.push({ key: 'home', path: '/nav/home', label: '系统主页', icon: <DesktopOutlined /> })
            menu.forEach((element, index) => {
                // console.log('element',element);
                it.push({
                    key: element.key,
                    label: element.title,
                    icon: <i className={'iconfont iconfont-' + element.icon} />,
                    children: []
                })
                // console.log('it', it);
                if (it[index + 1].children) {
                    // console.log('children', element.children);
                    if (element.children) {
                        element.children.forEach(item => {
                            it[index + 1].children.push({
                                key: item.key,
                                label: item.title,
                                path: item.path
                            })
                        })
                    }
                } else {
                    return it
                }
            });
            setItems(it)
        })
    }, [])

    function out() {
        console.log('退出');
        localStorage.clear();
        navigate('/login', { relative: true })
    }

    function go() {
        // navigate('nav/center')
        navigate('/nav/personal')
    }
    function goPage(e) {
        // console.log(111111, e);
        navigate(e.item.props.path)
    }

    const items = [
        {
            key: '1',
            // label: '个人中心',
            label: (
                <a onClick={go}>个人中心</a>
            ),
            icon: <UserOutlined />
        },
        {
            key: '2',
            label: '密码修改',
            icon: <KeyOutlined />
        },
        {
            key: '3',
            label: (
                <Popconfirm
                    title="您确定要退出登录？"
                    okText="确定"
                    cancelText="取消"
                    onConfirm={out}
                >
                    <a>退出登录</a>
                </Popconfirm>
            ),
            icon: <LogoutOutlined />
        },

    ];



    return (
        <div>
            <Layout>
                <Sider style={{ backgroundColor: '#393e46' }} trigger={null} collapsible collapsed={collapsed}>

                    <div className="logo" />
                    {/* <div className='sider_title'>
                        <img src="http://xawn.f3322.net:8002/distremote/static/img/logo.png" alt="" />
                        <h1 className='sider_title_text'>赤兔养车</h1>
                    </div> */}
                    <Menu style={{ backgroundColor: '#393e46' }}
                        theme="dark"
                        mode="inline"
                        defaultSelectedKeys={['/home']}
                        items={item}
                        onClick={goPage}
                    />
                </Sider>
                <Layout className="site-layout" style={{ height: '100vh' }}>
                    <Header
                        className="site-layout-background"
                        style={{
                            backgroundColor: 'white',
                            padding: 0,
                            paddingLeft: '20px',
                            display: 'flex', justifyContent: "space-between", alignItems: 'center'
                        }}
                    >
                        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: () => setCollapsed(!collapsed),
                        })}

                        <div style={{ display: 'flex', justifyContent: "space-between", alignItems: 'center', cursor: "pointer" }}>
                            <div style={{ marginRight: '13px' }}>{userinfo.username}</div>
                            <Dropdown
                                menu={{
                                    items,
                                }}
                                placement="bottom"
                                arrow
                            >
                                <Avatar style={{ marginRight: '40px' }}
                                    src={`http://xawn.f3322.net:8002/distremote/static/avatar/${userinfo.avatar}`} />
                            </Dropdown>
                        </div>

                    </Header>

                    <Content
                        className="site-layout-background"
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                        }}
                    >
                        <Outlet />
                    </Content>

                </Layout>
            </Layout>
        </div>
    )
}
